<template>
  <t-row :gutter="[24, 24]">
    <t-col :flex="3">
      <div class="user-left-greeting">
        <div>
          Hi，{{ userStore.userInfo?.nickname }}
          <span class="regular"> {{ $t('pages.user.markDay') + '50' }}</span>
        </div>
        <t-avatar :image="fileView(userStore.userInfo?.avatar)" />
      </div>

      <t-card class="user-info-list" :title="$t('pages.user.personalInfo.title')" :bordered="false">
          <t-form ref="submitFormRef" style="margin-top: 20px" :data="submitForm" @submit="submit">
              <t-row style="width: 100%;" :gutter="[16, 24]">
                  <t-col :span="6">
                      <t-form-item :label="t('pages.sysUser.password')" name="password">
                          <t-input type="password" v-model="submitForm.password" :placeholder="t('pages.sysUser.passwordPlaceholder')"/>
                      </t-form-item>
                  </t-col>
                  <t-col :span="6">
                      <t-form-item :label="t('pages.sysUser.sex')" name="sex">
                          <t-select v-model="submitForm.sex" :options="sexOptions" :placeholder="t('pages.sysUser.sexPlaceholder')"/>
                      </t-form-item>
                  </t-col>
                  <t-col :span="6">
                      <t-form-item :label="t('pages.sysUser.nickname')" name="nickname">
                          <t-input v-model="submitForm.nickname" :placeholder="t('pages.sysUser.nicknamePlaceholder')"/>
                      </t-form-item>
                  </t-col>
                  <t-col :span="6">
                      <t-form-item :label="t('pages.sysUser.phone')" name="phone">
                          <t-input v-model="submitForm.phone" :placeholder="t('pages.sysUser.phonePlaceholder')"/>
                      </t-form-item>
                  </t-col>
                  <t-col :span="6">
                      <t-form-item :label="t('pages.sysUser.email')" :rules="[{email: true, message: t('pages.sysUser.required.email'), type: 'error', trigger: 'blur'}]" name="email">
                          <t-input v-model="submitForm.email" :placeholder="t('pages.sysUser.emailPlaceholder')"/>
                      </t-form-item>
                  </t-col>
                  <t-col :span="6">
                      <t-form-item :label="t('pages.sysUser.avatar')" name="avatar">
                          <s-upload v-model:value="submitForm.avatar" value-type="data" :limit="1" :tip="t('pages.sysUser.avatarPlaceholder')" />
                      </t-form-item>
                  </t-col>
              </t-row>
              <t-button type="submit">提交</t-button>
          </t-form>
      </t-card>

    </t-col>
  </t-row>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store';
import { fileView } from "@/api/upload";
import { t } from "@/locales";
import SUpload from '@/components/s-upload/index.vue';
import { sexOptions } from '../userList/props';
import {ref} from "vue";
import {SubmitContext, MessagePlugin} from "tdesign-vue-next";
import {updateUser} from "@/api/login";
const userStore = useUserStore();

const submitForm = ref(userStore?.userInfo || {});

const submit = async (cxt: SubmitContext) => {
    if (cxt.validateResult) {
        await updateUser(submitForm.value);
        MessagePlugin.success('修改成功！');
        userStore.getUserInfo();
    }
}

</script>

<style lang="less" scoped>
@import './index.less';

.t-descriptions {
  margin-top: 24px;
}
</style>
